<div>

    <h1>{{trainer.name}}, the {{trainer.designation}}</h1>
    <img ng-src="{{'images/trainers/' + trainer.largeImage}}"/>

    <div class="train-container">
        <div class="feat-list-container">
            <h3>Trainable feats</h3>
            <ol class="feat-category-list">
                <li ng-repeat="featCategory in trainerFeatCategoryArray | orderBy: 'order'">
                    <h4>{{featCategory.name}}</h4>
                    <ol class="value-list feat-list">
                        <li ng-class="{selectedFeat : (feat == selectedFeat)}"
                            ng-repeat="feat in featCategory.feats"
                            title="{{feat.display.description}}" ng-click="setSelectedFeat(feat)">
                            <span class="feat-icon-holder"><img ng-src="images/icons/{{feat.display.icon}}"/></span>
                            <span class="feat-name-holder">{{feat.display.name}}</span>
                        </li>
                    </ol>
                </li>
            </ol>
        </div>
        <div class="arrows-container">
            <button class="arrow" ng-click="addSelectedFeat()"> ></button>
            <button class="arrow" ng-click="removeSelectedFeat()"> <</button>
            <button class="arrow" ng-click="removeAllFeats()"> <<</button>
        </div>
        <div class="feat-list-container">
            <h3>Your feats</h3>
            <ol class="feat-category-list">
                <li ng-repeat="featCategory in characterFeatCategoryArray | orderBy: 'order'">
                    <h4>{{featCategory.name}}</h4>
                    <ol class="value-list feat-list">
                        <li ng-class="{selectedFeat : (feat == selectedFeat)}"
                            ng-repeat="feat in featCategory.feats" title="{{feat.display.description}}"
                            ng-click="setSelectedFeat(feat)">
                            <span class="feat-icon-holder"><img ng-src="images/icons/{{feat.display.icon}}"/></span>
                            <span class="feat-name-holder">{{feat.display.name}}</span>
                        </li>
                    </ol>
                </li>
            </ol>
        </div>
    </div>
    <div id="gold-counter-container">
        <p>
            Cost: {{selectedFeatsCost}}. Your gold: {{playerCharacter.gold}}
        </p>
    </div>
    <div id="button-container">
        <button ng-click="cancel()">Cancel</button>
        <button ng-click="trainSelected()" ng-disabled="selectedFeatsCost > playerCharacter.gold">Train</button>
    </div>
</div>